CSS background-image property is used to add a background image on an element or the webpage. For example,
body {background-image: url("girl-avatar.png");}Browser Output
Here, the background-image property sets the specified image in the background of the body element.
Syntax of Background-ImageThe syntax of the background-image property is as follows,
background-image: url(path-to-image) | none | initial | inherit;Here,
url(path-to-image): specifies the URL of the image,none: no image is displayed (default value)initial: sets the property to its default valueinherit: inherits the property from its parent element.CSS Background-Image ExampleLet's see an example of the background-image property,
HTMLCSS CSS background-image body {background-image: url("https://www.programiz.com/blog/content/images/2022/03/Banner-Image-1.png");}Browser Output
In the above example, the background image is repeated. If the image is smaller than the container element, then the image is repeated in horizontal and vertical directions. And the remaining image is clipped from the edge of the container.
CSS Background-Image PropertiesWe can customize the background image using different background image properties. Let's see an example,
HTMLCSSCSS background-imagebody {background-image: url("../assets/background-image.png");background-image: url("https://www.programiz.com/blog/content/images/2020/11/intro-c-banner-1-1.png");/* doesn't allows the image to repeat */background-repeat: no-repeat;/* scales the image proportionally to cover the background */background-size: cover;/* centers the image in the center of the background */background-position: center;/*sets the height of the body to 100viewport height */height: 100vh;}Browser Output
In the above example, we have used background-repeat, background-size, and background-position properties. Some of the commonly used properties to customize background images are as follows:
PropertyDescriptionbackground-repeatspecifies whether a background image should be repeated or notbackground-attachmentspecifies whether the background image should be fixed or scroll with the rest of the content of the pagebackground-sizespecifies the size of the background imagebackground-positionspecifies the position of the background image within the elementbackground-clipspecifies the background area to be either border-box, content-box, or padding-boxbackground-originspecifies the starting position of the background image within the elementMultiple BackgroundsThe background-image property also allows us to have multiple background images for an element. We can provide multiple url separated by a comma in the background-image property.
The images are layered on top of each other.
Let's see an example,
HTMLCSSCSS background-imagebody {height: 100vh;/* url for two images respectively */background-image: url("https://www.programiz.com/blog/content/images/2022/03/Banner-Image-1.png"),url("https://img.freepik.com/free-vector/leaves-background-color-year_23-2148380575.jpg?size=626&ext=jpg&ga=GA1.2.1929559493.1681795349&semt=ais");/* sets first image width to 400px and scales the second image to cover background area */background-size: 400px, cover;/* both images stopped from repeating */background-repeat: no-repeat;}Browser Output
In the above example, we have used two background images (girl avatar image and dark blue background image) to set the background of the body element. The first added image (girl avatar) is stacked at the top of the second added image (dark blue background image).
Additionally, we have used background-size, background-postion, and background-repeat properties to customize the background.
Using Background Color as FallbackIt is common practice to specify a background-color along with a background-image as a fallback. This ensures that the website maintains a consistent look in case the image fails to load.
Let's see an example,
HTMLCSSCSS background-imageUsing background color as fallback for imagebody {background-color: lightblue;background-image: url("https://www.programiz.com/blog/content/images/2020/11/intro-c-banner-1-1.png");background-repeat: no-repeat;background-size: cover;background-position: center;height: 100vh;}Browser Output
In the above example, if the background-image fails to load then background-color will be set to lightblue, and our text will be still visible and consistent with the design.
Let's assume our background-image fails to load, then we will have the following browser output,